<template>
	<view class="content">
		<view></view>
		<view class="lottery">
			<wheel :prizes="prizes" :size="700" :duration="5000" @run="onWheelClick"
				@done="onWheelDone" ref="luckyWheel" :lightImgs="lightImages" customStyle="borderRadius: 50%;">
				<template v-slot:bg>
					<image src="/static//wheel/tzbj.png" style="width: 100%; height: 100%" />
				</template>
				<template v-slot:pointer>
					<image src="/static//wheel/tan.png" style="width: 212rpx" mode="widthFix" @click="startWheel"/>
				</template>
			</wheel>
			<view class="wheeltime">0</view>
		</view>
		<view class="rank ">
			<view class="ranktitle">- 中奖记录 -</view>
			<view class="rankpeople">
				<view class="itempeople">
					<view class="avatar">
						<view class="avatarpeople"></view>
					</view>
					<view class="detail">
						<view class="nametime">
							<view class="name hidden">北燕1111难飞</view>
							<view class="time">2025.03.01</view>
						</view>
						<view class="desc hidden">获得了一等奖，珍贵手链一份</view>
					</view>
					<view class="product">
						<view class="iamge"> </view>
					</view>
				</view>
				<view class="itempeople">
					<view class="avatar">
						<view class="avatarpeople"></view>
					</view>
					<view class="detail">
						<view class="nametime">
							<view class="name hidden">北燕1111难飞</view>
							<view class="time">2025.03.01</view>
						</view>
						<view class="desc hidden">获得了一等奖，珍贵手链一份</view>
					</view>
					<view class="product">
						<view class="iamge"> </view>
					</view>
				</view>
			</view>
		</view>
		<view class="task">
			
		</view>
	</view>
</template>

<script>
	import wheel from '@/components/wheel';
	export default {
		components: {
			wheel
		},
		data() {
			return {
				lightImages: ['/static/wheel/tpoint1.png', '/static//wheel/tpoint2.png'],
				prizes: [{
						name: '积分',
						image: '/static//wheel/thb.png',
						pro: '50积分',
					},
					{
						name: '积分',
						image: '/static/wheel//thb.png',
						pro: '100积分',
					},
					{
						name: '优惠券',
						image: '/static//wheel/thb.png',
						pro: '15元优惠券',
					},
					{
						name: '家用电器',
						image: '/static/wheel//thb.png',
						pro: '微波炉',
					},
					{
						name: '谢谢参与',
						image: '/static//wheel/thb.png',
						pro: '15元优惠券',
					},
					{
						name: '办公用品',
						image: '/static/wheel//thb.png',
						pro: '机械键盘',
					},
					{
						name: '生活用品',
						image: '/static//wheel/thb.png',
						pro: '化妆刷',
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			startWheel() {
				this.$refs.luckyWheel.run(2);
			},
			onWheelClick() {
				console.log('用户点击了转盘');
				this.$refs.luckyWheel.run(2);
			},
			onWheelDone(prize) {
				console.log('抽奖结束，中奖奖品：', prize);
			},
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: aliceblue;
		min-height: 100vh;
		height: 100%;
		padding: 20upx;
	}
	.lottery {
	    position: relative;
	    display: inline-block;
	    width: 700rpx;
	    height: 700rpx;
		margin: 20rpx 0 0 0 ;
	  }
	  .wheeltime{
		  position: absolute;
		  z-index: 9999;
		  top: 385upx;
		  left: 343upx;
		  color: white;
		  font-weight: bold;
	  }
	  .inline{
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
	  .hidden{
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
	  }
	  .rank{
		  min-height: 300upx;
		  height: 100%;
		  width: 100%;
		  background-color: #ffffff;
		  margin: 20upx 0;
		  padding: 10upx;
	  }
	  .ranktitle{
		  color: #915C43 ;
		  text-align: center;
		  padding:20upx 0;
		  font-size: 40upx;
		  font-weight: bold;
		  border-bottom: 0.5upx solid gray;
	  }
	  .rankpeople{
		  padding: 30upx 0upx 10upx 0;
	  }
	  .itempeople{
		  display: flex;
		  align-items: center;
		  justify-content: left;
		  color: #915C43;
		  background-color: #FEFBF6;
		  padding: 20upx;
		  margin-bottom: 30upx;
	  }
	  .itempeople .avatarpeople{
			  width: 124upx;
			  height: 124upx;
			  border-radius: 50%;
			  background-color: beige;
		  }
		.itempeople .detail{
			margin: 10upx 10upx 20upx 10upx;
		}
		.itempeople .detail .desc{
			font-size: 25upx;
			margin-top: 20upx;
			font-weight: 400;
			width: 350upx;
		}
		.itempeople .detail .nametime{
			display: flex;
			align-items: center;
			justify-content: left;
			text-align: center;
		}
		.itempeople .detail .nametime .name{
			font-size: 30upx;
			font-weight: bold;
			width: 160upx;
			max-width: 200upx;
		}
		 .itempeople .detail .nametime .time{
			 font-size: 28upx; 
			 margin-left: 10upx;
			 width: 180upx;
			 background-color: #F9EEDA;
			 border-radius: 40upx;
			 font-weight: 400;
		 }
		 .itempeople .product{
			 background-color: gray;
			 height: 120upx;
			 width: 120upx;
			 margin-left: 20upx;
		 }
	  .task{
		  height: 300upx;
		  width: 100%;
		  background-color: #ffffff;
	  }
</style>